<template>
  <div>
    <!-- 轮播图 -->
    <!-- <SwipeImg></SwipeImg> -->
    <!-- 电影页面标签页 -->
    <van-tabs title-active-color="#ff5f16">
      <van-tab title="正在热映" to="/films/nowplaying" />
      <van-tab title="即将上映" to="/films/comingsoon" />
    </van-tabs>
    <!-- 正在热映、即将上映 -->
    <keep-alive>
      <router-view></router-view>
    </keep-alive>
  </div>
</template>

<script>
/* 按需导入有赞UI */
import { Tab, Tabs, NavBar } from "vant";
/* 导入轮播图组件 */
import SwipeImg from "@/components/SwipeImg.vue";
/* 导入mapstate获取state */
import { mapState } from "vuex";
export default {
  name: "FilmsView",
  components: {
    [Tab.name]: Tab,
    [Tabs.name]: Tabs,
    [NavBar.name]: NavBar,
    /* 轮播图组件 */
    SwipeImg,
  },
  data() {
    return {
      /* 记录正在热映还是上映的状态 */
      activeName: "",
    };
  },
  computed: {
    /* 获取CityModule里的cityName */
    ...mapState("CityModule", ["cityName"]),
  },
  methods: {
    /* 获取URL中的上映热映状态 */
    getActiveName() {
      const routePath = this.$route.path;
      // console.log(routePath);//films/nowplaying
      if (routePath.includes("nowplaying")) this.activeName = "nowplaying";
      else if (routePath.includes("comingsoon")) this.activeName = "comingsoon";
      else this.activeName = "";
    },
  },
  mounted() {
    this.getActiveName();
  },
};
</script>

<style lang="scss" scoped>
</style>